<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
var ws;
var url;

function connect() {
	url = document.getElementById("server_url").value;
	console.log(url);
	
	if ("WebSocket" in window) {
		ws = new WebSocket(url);
	} else if ("MozWebSocket" in window) {
		ws = new MozWebSocket(url);
	} else {
		write_error("This Browser does not support WebSockets.");
		return;
	}
	ws.onopen = function(e) {
		document.getElementById("server_url").disabled = true;
		document.getElementById("toggle_connect").innerHTML = "Disconnect";
	};
	
	ws.onerror = function(e) {
		write_error("Client: An error occured, see console log for more details.");
		console.log(e);
	};
	
	ws.onclose = function(e) {
		document.getElementById("server_url").disabled = false;
		document.getElementById("toggle_connect").innerHTML = "Connect";
		document.getElementById("server_details").innerHTML = "";
	};
	
	ws.onmessage = function(e) {
		var data = JSON.parse(e.data);
				
		if (data.type == "test_welcome") {
			var o = "";
			o += "<strong>Version:</strong> "+data.version+" ";
			o += "<strong>Ident:</strong> "+data.ident+" ";
			o += "<strong>num_workers:</strong> "+data.num_workers+" ";
			document.getElementById("server_details").innerHTML = o;
		} else if (data.type == "test_start") {

			$("#result-"+data.token).removeClass("pass fail error");
			
			if ($("#result-"+data.token).length == 0) {
				var o = "";
				o += "<tr id='result-"+data.token+"'>";
				
				o += "<td class='token'>"+data.token+"</td>";
				o += "<td class='status'>Running</td>";
				o += "<td class='result'></td>";
				o += "<td class='total'></td>";
				o += "<td class='bytes'></td>";
				o += "<td class='min'></td>";
				o += "<td class='median'></td>";
				o += "<td class='mean'></td>";
				o += "<td class='max'></td>";
				o += "<td class='stddev'></td>";
				o += "<td class='MBps'></td>";
				
				o += "</tr>";
				
				o += document.getElementById("results-body").innerHTML;
				document.getElementById("results-body").innerHTML = o;
				//$("#results-body").html(o);
			} else {
				var o = "<td>"+data.token+"</td><td>Running</td>";
				
				o += "<td class='result'></td>";
				o += "<td class='total'></td>";
				o += "<td class='bytes'></td>";
				o += "<td class='min'></td>";
				o += "<td class='median'></td>";
				o += "<td class='mean'></td>";
				o += "<td class='max'></td>";
				o += "<td class='stddev'></td>";
				o += "<td class='MBps'></td>";
				
				$("#result-"+data.token).html(o);
			}
		} else if (data.type == "test_complete") {
			$("#result-"+data.token+" .status").html("Complete");
		} else if (data.type == "test_data") {
			if (data.data.current_connections != null) {
				var foo = "";
				
				foo += "Current Connections: "+data.data.current_connections+"<br />";
				foo += "Max Connections: "+data.data.max_connections+"<br />";
				foo += "Total Connections: "+data.data.total_connections+"<br />";
				foo += "Failed Connections: "+data.data.failed_connections+"<br />";
				
				$("#result-"+data.token+" .result").html(foo);
			}
			
			$("#result-"+data.token+" .result").html(data.data.result);
			$("#result-"+data.token+" .total").html(data.data.total);
			$("#result-"+data.token+" .bytes").html(data.data.bytes);
			$("#result-"+data.token+" .min").html(data.data.min);
			$("#result-"+data.token+" .median").html(data.data.median);
			$("#result-"+data.token+" .mean").html(data.data.avg);
			$("#result-"+data.token+" .max").html(data.data.max);
			$("#result-"+data.token+" .stddev").html(data.data.stddev);
			$("#result-"+data.token+" .MBps").html((data.data.bytes/data.data.total).toFixed(4));
			
			$("#result-"+data.token).addClass(data.data.result);
		} else if (data.type == "error") {
			$("#result-"+data.token+" .status").html("Error");
			$("#messages").html(data.data+"<br />");
		} else {
			console.log(data);
		}
	};
}

function write_error(msg) {
	$("#messages").css("display","block").html(msg);
}

function disconnect() {
	ws.close();
	$("#server_url").attr("disabled","disabled");
	$("#toggle_connect").html("Connect");
}

function toggle_connect() {
	if ($("#server_url").attr("disabled") == "disabled") {
		disconnect();
	} else {
		connect();
	}
}

function send() {
	$("#messages").css("display","none");
	
	if (ws === undefined || ws.readyState != 1) {
		write_error("Websocket is not avaliable for writing");
		return;
	}	
	
	ws.send($("#msg").val());
}

</script>

<style>
body,html {
	margin: 0px;
	padding: 0px;
	font-family: Tahoma,Arial,Verdana,sans-serif;
	background-color: #F4F4F4;
}
#server_url {
	width: 200px;
}
h2 {
	font-size: 18px;
	margin: 20px 20px;
}
#controls {
	/*float:right;*/
	background-color: #333;
	color: white;
	font-size: 14px;
	padding: 4px;
}
#msg {
	width: 100%;
	
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	
	display: block;
	height: 5em;
}
#message_input button {
	display: block;
}

#message_input {
	margin: 0px 20px;
}

#results {
	margin: 0px 20px;
}
#results table {
	width: 100%;
	border: 1px solid white;
	color: white;
	border-collapse: collapse;
	border-spacing: 0px;
}

#messages {
	display: none;
	margin: 20px;
	padding: 4px;
	color: white;
}

th,td {
	font-weight: normal;
	padding: 6px;
	font-size: 0.8em;
	border: 1px solid white;
}

thead tr {
	background-color: #048;
}

tbody tr {
	background-color: #666;
}
.pass {
	background-color: #0A0;
}
.fail {
	background-color: #900;
}
.error {
	background-color: #9A0;
}

</style>

<div id="controls">
	<div id="server">
		<input type="text" name="server_url" id="server_url" value="ws://localhost:9050" />
		<button id="toggle_connect" onclick="toggle_connect();">Connect</button>
		<span id="server_details"></span>
	</div>
</div>
<h2>Run Test</h2>
<div id="message_input">
	<textarea type="text" id="msg">message_test:uri=ws://localhost:9002;size=10;count=1;timeout=10000;binary=true;sync=true;correctness=exact;token=foo;quantile_count=10;rtts=false;</textarea><br />
	<button onclick="send();">Run Test</button>
</div>
<h2>Test Results</h2>
<div id="messages" class='fail'></div>
<div id="results">
	<table>
		<thead>
			<tr>
				<th>Token</th>
				<th>Status</th>
				<th>Result</th>
				<th>Time (µs)</th>
				<th>Size (bytes)</th>
				<th>Min</th>
				<th>Median</th>
				<th>Mean</th>
				<th>Max</th>
				<th>Stddev</th>
				<th>MB/sec</th>
			</tr>
		</thead>
		<tbody id="results-body">
			
		</tbody>
	</table>
</div>

</body>
</html>